<template>
  <div class="layout">
        <Menu mode="horizontal" theme="dark" active-name="1">
            <div >
              <img src="static/image/logo.png" alt="" class="layout-logo">
            </div>
            <div class="layout-nav">
                <MenuItem name="key" v-for="(Nav, key) in $store.state.Navigation" :key="key">
                    <router-link :to="Nav.path">
                    <Icon v-bind:type='Nav.Icon'></Icon>
                    {{Nav.Name}}
                    </router-link>
                </MenuItem>
            </div>
        </Menu>
          <Row class="main">
            <Col span="3">
              <Menu width="auto" theme="light">
                <Submenu name="1">
                    <template slot="title">
                        <Icon type="ios-paper"></Icon>
                        内容管理
                    </template>
                    <MenuItem name="1-1">文章管理</MenuItem>
                    <MenuItem name="1-2">评论管理</MenuItem>
                    <MenuItem name="1-3">举报管理</MenuItem>
                </Submenu>
                <Submenu name="2">
                    <template slot="title">
                        <Icon type="ios-people"></Icon>
                        用户管理
                    </template>
                    <MenuItem name="2-1">新增用户</MenuItem>
                    <MenuItem name="2-2">活跃用户</MenuItem>
                </Submenu>
                <Submenu name="3">
                    <template slot="title">
                        <Icon type="stats-bars"></Icon>
                        统计分析
                    </template>
                    <MenuGroup title="使用">
                        <MenuItem name="3-1">新增和启动</MenuItem>
                        <MenuItem name="3-2">活跃分析</MenuItem>
                        <MenuItem name="3-3">时段分析</MenuItem>
                    </MenuGroup>
                    <MenuGroup title="留存">
                        <MenuItem name="3-4">用户留存</MenuItem>
                        <MenuItem name="3-5">流失用户</MenuItem>
                    </MenuGroup>
                </Submenu>
            </Menu>
        </Col>
            <Col span="21">
              <router-view></router-view>
            </Col>
          </Row>
    </div>
</template>

<script>
// 导入vuex
import store from "@/stores/store"
import axios from "axios"
export default {
  data() {
    return {
      cityList: [
        {
          value: "New York",
          label: "New York"
        },
        {
          value: "London",
          label: "London"
        },
        {
          value: "Sydney",
          label: "Sydney"
        },
        {
          value: "Ottawa",
          label: "Ottawa"
        },
        {
          value: "Paris",
          label: "Paris"
        },
        {
          value: "Canberra",
          label: "Canberra"
        }
      ]
    };
  },
  name: "home",
  store
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.layout{
  height: 100%;
}
.main{
  height: 100%;
}
.main .ivu-col{
  height: 100%;
}
.layout-logo {
  width: 100px;
  height: 30px;
  background: #5b6270;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 15px;
  left: 20px;
}
.layout-nav {
  width: 485px;
  margin: 0 auto;
}
.aa
.chart {
  width: 100%;
  height: 100%;
}
.aa {
  text-align: center;
}
</style>
